<template>
  <div class="login register">
    <div class="left-wrap">
      <LoginLeftView></LoginLeftView>
    </div>
    <div class="right-wrap">
      <div class="header">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#iconsys-zhaopian-copy"></use>
        </svg>
        <h1>{{ systemName }}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <div class="form-item">
            <!-- <h3 class="title">{{ $t('forgetPassword.title') }}</h3> -->
            <div style="display: flex;align-items: center;" @click="toLogin">
              <div class="back">
                <el-icon>
                  <ArrowLeftBold style="color: #000;" />
                </el-icon>
              </div>
              <h3 class="sub-title">{{ $t('forgetPassword.title') }}</h3>
            </div>
            <p class="tips">{{ $t('forgetPassword.subTitle') }}</p>

            <el-form ref="formRef" :model="formData" :rules="rules" @keyup.enter="handleSubmit"
              style="margin-top: 25px">
              <el-form-item prop="phone">
                <el-input :placeholder="$t('forgetPassword.placeholder[0]')" size="large"
                  v-model.trim="formData.phone" />
              </el-form-item>
              <el-form-item prop="code">
                <el-row :gutter="12" style="width: 100%">
                  <el-col :span="countdown > 0 ? 17 : 18">
                    <el-input v-model="formData.code" :placeholder="$t('forgetPassword.placeholder[1]')" />
                  </el-col>
                  <el-col :span="countdown > 0 ? 7 : 6">
                    <el-button size="large" style="height: 100%" @click="sendSmsCodeData">
                      {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="password">
                <el-input :placeholder="$t('forgetPassword.placeholder[2]')" size="large"
                  :type="showPassword ? 'text' : 'password'" v-model.trim="formData.password">
                  <template #suffix>
                    <el-button @click="showPassword = !showPassword" type="text" style="padding: 0 6px;" tabindex="-1">
                      <el-icon>
                        <template v-if="showPassword">
                          <View style="color: #606266;" />
                        </template>
                        <template v-else>
                          <Hide style="color: #606266;" />
                        </template>
                      </el-icon>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="confirmPassword">
                <el-input :placeholder="$t('forgetPassword.placeholder[3]')" size="large"
                  :type="showConfirmPassword ? 'text' : 'password'" v-model.trim="formData.confirmPassword">
                  <template #suffix>
                    <el-button @click="showConfirmPassword = !showConfirmPassword" type="text" style="padding: 0 6px;"
                      tabindex="-1">
                      <el-icon>
                        <template v-if="showConfirmPassword">
                          <View style="color: #606266;" />
                        </template>
                        <template v-else>
                          <Hide style="color: #606266;" />
                        </template>
                      </el-icon>
                    </el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>

            <div style="margin-top: 15px">
              <el-button class="login-btn" size="large" type="primary" @click="register" :loading="loading" v-ripple>
                {{ $t('forgetPassword.submitBtnText') }}
              </el-button>
            </div>

            <!-- <div style="margin-top: 15px">
              <el-button style="width: 100%; height: 46px" size="large" plain @click="toLogin">
                {{ $t('forgetPassword.backBtnText') }}
              </el-button>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AppConfig from '@/config'
import { useI18n } from 'vue-i18n'
import { LoginMethod } from '@/api/LoginMethod'

defineOptions({ name: 'ForgetPassword' })

const { t } = useI18n()
import type { FormInstance, FormRules } from 'element-plus'
const systemName = AppConfig.systemInfo.name
const router = useRouter()
const loading = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)

const formRef = ref()

const formData = reactive({
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
})

const countdown = ref(0)

const canSend = computed(() => {
  return formData.phone && /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(formData.phone)
})

const validatePhone = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(t('forgetPassword.placeholder[0]')))
  } else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
    callback(new Error(t('forgetPassword.rule[0]')))
  } else {
    callback()
  }
}

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(t('forgetPassword.placeholder[2]')))
  } else {
    if (formData.password !== '') {
      formRef.value?.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error(t('forgetPassword.placeholder[3]')))
  } else if (value !== formData.password) {
    callback(new Error(t('register.rule[1]')))
  } else {
    callback()
  }
}

const rules = computed<FormRules>(() => ({
  password: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 6, message: t('register.rule[3]'), trigger: 'blur' }
  ],
  confirmPassword: [{ required: true, validator: validatePass2, trigger: 'blur' }],
  phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
  code: [{ required: true, message: t('login.placeholder[4]'), trigger: 'blur' }]
}))

async function sendSmsCodeData() {
  try {
    if (!formData.phone) {
      ElMessage.error('请输入手机号')
      return
    }
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    const paramsObj = {
      mobile: formData.phone,
      tempId: 2407768,
      type: 1
    }
    const { code, msg } = await LoginMethod.sendSmsCode(paramsObj)
    if (code === '00000') {
      await handleSubmit()
    } else {
      ElMessage.error(msg)
    }
  } catch (e) {
  } finally {
  }
}

const handleSubmit = async () => { }

async function register() {
  try {
    const paramsObj = {
      mobile: formData.phone,
      code: formData.code,
      oldPassword: formData.password,
      newPassword: formData.confirmPassword
    }
    const res = await LoginMethod.forgotPassword(paramsObj)
    if (res.code === '00000') {
      ElMessage.success('密码修改成功')
      router.push('/login')
    }
  } catch { } finally { }
}

const toLogin = () => {
  router.push('/login')
}
</script>

<style lang="scss" scoped>
@use '../login/index';
</style>
